<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'
import { ref } from 'vue'
import ChannelSelect from './components/ChannelSelect.vue'
import ArticleEdit from './components/ArticleEdit.vue'
import { artGetListService, artDelService } from '@/api/article'
// 导入封装好的时间格式化函数 Element UI 基于dayjs 来格式化时间
import { formTime } from '@/utils/format'

const articleList = ref([]) // 文章列表数据
const total = ref(0)// 总条数
// 定义请求参数对象
const params = ref({
  pagenum: 1,// 当前页
  pagesize: 5,// 当前生效的每页条数
  cate_id: '',
  state: ''
})
// loading状态 在Elements UI中只需要通过 v-loading指令即可完成
const loading = ref(false)
// 基于 params.value 获取文章列表数据
const getArticleList = async () => {
  // 发请求之前开启loading
  loading.value = true
  const res = await artGetListService(params.value)
  articleList.value = res.data.data
  total.value = res.data.total
  // 请求结束 关闭loading
  loading.value = false
}
getArticleList()

// 处理分页的逻辑
const onSizeChange = val => {
  // 只要是页码 变化时 都要重新获取文章列表数据
  params.value.pagenum = 1
  params.value.pagesize = val
  getArticleList()
}
// 处理当前页码发生变化的逻辑
const onCurrentChange = val => {
  params.value.pagenum = val
  getArticleList()
}
// 搜索的逻辑 按照最新的条件 重新获取文章列表数据 从第一页开始展示
const onSearch = () => {
  // 首先要重置页码
  params.value.pagenum = 1
  // 最后再重新获取文章列表数据
  getArticleList()
}
// 重置的逻辑 将筛选条件清空 重新获取文章列表数据
// 或者我们传递不同的参数给请求，我们这里直接是将cate_id和state都置空
const onReset = () => {
  // 首先要重置页码
  params.value.pagenum = 1
  params.value.cate_id = ''
  params.value.state = ''
  // 下面的方式也是可以的
  // params.value = {
  //   pagenum: 1,
  //   pagesize: 5,
  //   cate_id: '',
  //   state: ''
  // }
  getArticleList()
}
const articleEditRef = ref()
// 添加逻辑 唯一不同的是 看有没有id
const onAdd = () => {
  articleEditRef.value.open({})
}
// 编辑逻辑 唯一不同的是 看有没有id 有id的是 编辑逻辑
const onEditArticle = row => {
  articleEditRef.value.open(row)
}

// 删除逻辑
const onDeleteArticle = async row => {
  // 使用 ElMessageBox.confirm() 来实现提示
  await ElMessageBox.confirm('你确认删除该文章信息吗？', '温馨提示', {
    type: 'warning', // 提示类型 警告
    confirmButtonText: '确认',// 确认按钮的文字
    cancelButtonText: '取消',// 取消按钮的文字
  })
  // 调用接口
  await artDelService(row.id)
  // 反馈给用户
  ElMessage({ type: 'success', message: '删除成功' })
  // 重新获取文章列表数据
  getArticleList()
}

// 添加或者编辑成功的回调
const onSuccess = (type) => {
  if (type === 'add') {
    // 如果是添加 最好渲染最后一页
    // 当我们发生请求渲染的时候 后台已经添加了1条 所以我们需要手动+1
    // 然后我们渲染的时候 在走请求即可
    const lastPage = Math.ceil((total.value + 1) / params.value.pagesize)
    // 更新成最大页码数 在渲染
    params.value.pagenum = lastPage
  }
  getArticleList()
}
</script>
<template>
  <page-container title="文章管理">
    <template #extra>
      <el-button type="primary" @click="onAdd">添加文章</el-button>
    </template>
    <!-- 表单区域 -->
    <el-form inline>
      <el-form-item label="文章分类">
        <!-- 为了后续添加文章的时候复用下拉菜单我们封装成一个组件 -->
        <!-- vue2:v-model是 :value 和 @input 的简写-->
        <!-- vue3:v-model是 :modelValue 和 @update:modelValue 的简写-->
        <channel-select v-model="params.cate_id"></channel-select>
      </el-form-item>
      <el-form-item label="发布状态:">
        <!-- 后台标记发布状态就是通过 中文来标记的 所以这里的value写中文即可 -->
        <!-- el-select的默认是英文的 我们导入element的中文包即可 -->
        <el-select style="width: 240px;" v-model="params.state">
          <el-option label="已发布" value="已发布"></el-option>
          <el-option label="草稿" value="草稿"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格区域 -->
    <!-- 使用prop 来绑定数据 -->
    <el-table :data="articleList" v-loading="loading">
      <el-table-column label="文章标题" prop="title">
        <template #default="{ row }">
          <el-link type="primary" :underline="false">{{ row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="分类" prop="cate_name"></el-table-column>
      <!-- 我们发现时间的格式不是我们预想的格式 我们封装一下工具函数 -->
      <el-table-column label="发表时间" prop="pub_date">
        <template #default="{ row }">
          {{ formTime(row.pub_date) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="state"></el-table-column>
      <!-- 利用插槽 来显示操作按钮 row可以获取当前行的数据 =>v-for 遍历 item -->
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button circle plain type="primary" :icon="Edit" @click="onEditArticle(row)"></el-button>
          <el-button circle plain type="danger" :icon="Delete" @click="onDeleteArticle(row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <!--
      :page-sizes 表示可以供用户选择的每页条数 需要注意的是 需要包含我们每页生效的条数(params.pagesize)
      :background="true" 为true默认的是蓝色的
      layout 表示控制的工具栏的 例如:前往的页数,总条数,选择每页的条数上一页，当前页数,下一页等等 一一对应 可以调换顺序
      @size-change 表示每页条数改变的时候触发的函数
      @current-change 当前页码改变的时候触发的函数
     -->
    <el-pagination v-model:current-page="params.pagenum" v-model:page-size="params.pagesize" :page-sizes="[2, 3, 5, 10]"
      :background="true" layout="jumper,total, sizes, prev, pager, next" :total="total" @size-change="onSizeChange"
      @current-change="onCurrentChange" style="margin-top: 20px;justify-content: flex-end;" />

    <!-- 抽屉组件
      可以通过内置的direction属性来控制显示的位置
      direction="ltr" 表示从左到右
      direction="rtl" 表示从右到左 默认值
      direction="ttb" 表示从上到下
      direction="btt" 表示从下到上
      size属性可以控制抽屉的宽度
     -->
    <ArticleEdit ref="articleEditRef" @success="onSuccess"></ArticleEdit>
  </page-container>
</template>
<style lang="scss" scoped></style>
